<template>
	<!-- <uni-nav-bar dark color="#999" backgroundColor="#f5f5f5" shadow @clickLeft="backFn" left-icon="left" leftText="返回" title="对冲" /> -->
	
	<view class="flex1 Collection2">
		<view>支付方</view>
		<view class="Collection2_number">{{formData.fromUserName}}</view>
	</view>
	<view class="list_item">
		<view class="flex1 Collection">
			<view class="Collection_label">收款人</view>
			<input class="edit_input" @input="inputFn" :value="formData.toUserName" placeholder="请输入收款人账号" placeholder-class="placeholder" />
		</view>
		<view class="userlist" v-if="userListShow" >
			<scroll-view scroll-y="true " class="scroll">
				<view class="userlist_item" @click="selectTouserFn(item)" v-for="(item,index) in userList" :key="index">{{item.nickname}}</view>
			</scroll-view>
		</view>
	</view>
	<view class="flex1 Collection">
		<view class="Collection_label">支付金额</view>
		<input class="edit_input"  v-model="formData.pricing"  placeholder="请输入支付金额" placeholder-class="placeholder" />
	</view>
	
	
	<view class="submit" @click="addbalanceFn">确认</view>
	
	<uni-popup ref="popup" type="bottom"  >
	     <view class="popup">
				<view class="main_content">
					<view class="content_num">
						<view
							v-for="item in pwdLen"
							:key="item"
							class="content_item"
						>
							{{ password[item - 1] ? '●' :  '' }}
						</view>
					</view>
				</view>
				
				 <view class="main_keyboard">
				            <view
				                v-for="item in numberLen"
				                :key="item"
				                class="key_num"
				                @tap="inputNumFun({ num: item })"
				            >
				                {{ item }}
				            </view>
				            <view class="key_null" />
				            <view
				                class="key_0"
				                @tap="inputNumFun({ num: 0 })"
				            >
				                0
				            </view>
				            <view
				                class="key_del"
				                @tap="delNumFun"
				            >
				               <image
									  src="/static/delete.png"
									  mode="aspectFill"
								  />
				            </view>
				        </view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { computed ,ref,reactive,toRefs} from 'vue';
	import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	
	const userInfo=sheep.$store('user').userInfo
	const formData=ref({
		toUser:'',
		fromUser:'',
		fromUserName:'',
		toUserName:'',
		pricing:'',//余额
		paymentPassword:'',//支付密码
	})
	formData.value.fromUserName=userInfo.phone
	formData.value.fromUser=userInfo.id
	
	//收款人列表
	const userList=ref();
	const userListShow=ref(false)
	
	const numberLen=ref(9)
	const pwdLen=ref(6)
	const state=reactive({
		password:[]
	})
	
	const {password}=toRefs(state)
	// console.log(arr.value);

	//弹框
	const popup=ref(null)
	
	const addbalanceFn=()=>{
		
		if(formData.value.toUser && formData.value.pricing){
			popup.value.open()
		}else{
			uni.showToast({
			   title:"数据请填完整",
			   icon:"none"
			})
		}
	}
	const closeFn=()=>{
		popup.value.close()
	}
    //点击输入密码
	const inputNumFun=(op)=>{
		// console.log(op);
		if(password.value.length<5){
			password.value.push(op.num);
		}else if( password.value.length ==5){
			console.log( password.value.length);
			password.value.push(op.num);
			console.log('12');
			submitFn()
		}
		// console.log(password.value);
	}
	//删除密码
	const delNumFun=()=>{
		 if (password.value.length == 0) return;
		 	console.log(  password.value);
			password.value.splice( password.value.length - 1,1  );
			console.log(  password.value);
	
	}
	
	
	
	//搜索
	const inputFn=(item)=>{
		console.log('1');
		console.log(item.detail.value);
		touser(item.detail.value)
	}
	const touser=(item)=>{
		sheep.$api.login.checked({nickname:item}).then(res=>{
			// console.log(res);
			userList.value=res.data
			if(res.data.length>0){
				userListShow.value=true
			}else{
				userListShow.value=false
			}
			// console.log(userList.value);
		})
	}
	
	//点击搜索收款人
	const selectTouserFn=(item)=>{
		console.log(item);
		formData.value.toUserName=item.nickname
		formData.value.toUser=item.id
		// console.log(formData.value.toUser);
		userListShow.value=false
		
	}
	
	
	//提交
	const submitFn=()=>{
		console.log('submitFn');
		console.log(password.value.join(''));
		formData.value.paymentPassword=password.value.join('')
		console.log(formData.value);
		uni.showLoading()
		sheep.$api.login.mutualRecharge(formData.value).then(res=>{
			console.log(res);
			if(res.code==200){
				
				uni.showToast({
					title:'操作成功！',
					icon:"success"
				})
				
				formData.value.toUser=''
				formData.value.toUserName=''
				formData.value.pricing=''
				formData.value.paymentPassword=''
				password.value=[]
				
				uni.hideLoading()
				closeFn()
				sheep.$store('user').getUserInfo()
			  setTimeout(()=>{
				  	uni.navigateBack({delta:1})
			  },800)
			}else {
				console.log('-----');
				formData.value.paymentPassword=''
				password.value=[]
				console.log(password.value);
				uni.showToast({
					title:'操作失败',
					icon:"none"
				})
			}
		})
	}
	
	
	const getUserInfo=()=>{
			  sheep.$api.login.userInfo().then(res=>{
				  console.log(res);
				 uni.setStorageSync('appuserInfo',res.data)
				 setTimeout(()=>{
				 	backFn()
				 },500)
			  })
	}
	
	const backFn=()=>{
		uni.navigateBack({detal:1})
	}
</script>

<style lang="scss" scoped>
	.flex1{
		display: flex;
		align-items: center;
	}
	.list_item{
		position: relative;
	}
	.userlist{
		position: absolute;
		top: 70rpx;
		left:50%;
		transform: translateX(-40%);
		width: 500rpx;
		background-color: #fff;
		z-index: 999;
	}
	.userlist_item{
		font-size: 26rpx;
		padding: 15rpx 30rpx;
		border-bottom: 2rpx solid #eee;
	}
	.scroll{
		height: 500rpx;
	}
	.Collection{
		background-color: #fff;
		padding: 25rpx 30rpx;
		font-size: 28rpx;
	}
	.Collection_label{
		width: 20%;
	}
	.Collection2{
		background-color: #fff;
		padding: 35rpx 30rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.Collection2_number{
		margin-left: 20rpx;
	}
	.placeholder{
		font-size: 26rpx;
	}
	.edit_input{
		margin-left: 20rpx;
	}
	
	.submit{
		background-color: red;
		margin: 30rpx 50rpx;
		text-align: center;
		color: #fff;
		padding: 20rpx 0;
		border-radius: 15rpx;
	}
	
	//输入密码框
	.popup{
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		padding:20rpx 30rpx;
	}
	 .main_content {
	        padding: 20rpx 100rpx;
	        .content_num {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            .content_item {
	                width: 75rpx;
	                height: 75rpx;
	                background-color: #f0f0f0;
	                border-radius: 16rpx;
	                display: flex;
	                justify-content: center;
	                align-items: center;
	            }
	        }
	        // .error_text {
	        //     font-size: 24rpx;
	        //     color: $u-error;
	        //     text-align: center;
	        //     margin-top: 20rpx;
	        // }
	    }
	.main_keyboard {
	        height: 500rpx;
	        display: flex;
	        flex-flow: wrap;
	        .key_null,
	        .key_del {
	            background: #ededed;
	        }
	        image {
	            width: 40rpx;
	            height: 30rpx;
	        }
	        .key_num,
	        .key_null,
	        .key_del,
	        .key_0 {
	            width: 33%;
	            height: 125rpx;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	        }
	        .key_num {
	            border-right: 2rpx solid #f1f4f4;
	            border-bottom: 2rpx solid #f1f4f4;
	            border-top: 2rpx solid #f1f4f4;
	            &:nth-child(n + 4) {
	                border-top: none;
	            }
	            &:nth-child(n + 7) {
	                border-bottom: none;
	            }
	        }
	        .key_0 {
	            border-top: 2rpx solid #f1f4f4;
	        }
	    }
	
</style>